<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SmartPing Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/pages/dashboard.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="index.html">SmartPing Dashbord </a>
      <div class="nav-collapse">
        <ul class="nav pull-right">
          <li></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!-- /container -->
  </div>
  <!-- /navbar-inner -->
</div>
<!-- /navbar -->
<div class="subnavbar">
  <div class="subnavbar-inner">
    <div class="container">
      <ul class="mainnav">
        <li><a href="index.html"><i class="icon-mail-forward"></i><span>Forward Ping</span> </a> </li>
        <li><a href="reverse.html"><i class="icon-mail-reply"></i><span>Reverse Ping</span> </a> </li>
        <li><a href="topology.html"><i class="icon-bar-chart"></i><span>Topology</span> </a> </li>
        <li><a href="alerts.html"><i class="icon-warning-sign"></i><span>Alerts</span> </a> </li>
        <!--<li ><a href="tools.html"><i class="icon-wrench"></i><span>Test Tools</span> </a> </li>-->
        <li  class="active"><a href="config.html"><i class="icon-cog"></i><span>Config</span> </a> </li>
      </ul>
    </div>
    <!-- /container --> 
  </div>
  <!-- /subnavbar-inner --> 
</div>
<!-- /subnavbar -->
<div class="main" style="margin-top:-20px;">
  <div class="main-inner">
    <div class="container" id="main">

      <div class="row">
          <div class="span4">

            <div class="widget-header">
              <i class="icon-user"></i>
              <h3>Save Configuration</h3>
            </div> <!-- /widget-header -->

            <div class="widget-content">
              <div style="text-align: center">
                <span>
                  <b style="top:-5px;"><a title="Default Password : smartping">Password:</a></b>
                  <input class="span2 password" type="password" id="pass">
                  <button style="margin: -10px 0 0 0;" type="submit" class="btn btn-primary" onclick="saveconf()">Save</button>
                </span>
              </div>
            </div>
            <br/>
            <div class="widget-header">
              <i class="icon-user"></i>
              <h3>Base Configuration</h3>
            </div> <!-- /widget-header -->

            <div class="widget-content">

            <h4>Base</h4><br>
            <div class="control-group"  style="float: left;width: 30%">
              <label class="control-label" for="Name" >Agent Name</label>
              <div class="controls">
                <input type="text" style="width:100%" id="Name" value="">
              </div> <!-- /controls -->
            </div> <!-- /control-group -->

            <div class="control-group" style="float: right;width: 60%;margin-right: 3%;">
              <label class="control-label" for="Ip">Agent Ip</label>
              <div class="controls">
                <input type="text"  style="width:100%" id="Ip" value="">
              </div> <!-- /controls -->
            </div> <!-- /control-group -->

              <div class="control-group"  style="float: left;width: 30%">
                <label class="control-label" for="Name" >Timeout(s)</label>
                <div class="controls">
                  <input type="text" style="width:100%" id="Timeout" value="">
                </div> <!-- /controls -->
              </div> <!-- /control-group -->

              <div class="control-group"  style="float: right;width: 60%">
                <label class="control-label" for="Name" >Ping Type</label>
                <div class="controls">
                  <select id="Ping"  style="width:100%">
                    <option name="sysping">sysping</option>
                    <option name="goping">goping</option>
                  </select>
                </div> <!-- /controls -->
              </div> <!-- /control-group -->

            <hr style="clear:both;">

            <h4>Alert</h4><br>

            <div class="control-group"  style="float: left">
              <label class="control-label" for="Thdchecksec">Check Period(s)&nbsp;&nbsp;&nbsp;</label>
              <div class="controls">
                <input type="text"  class="span1" id="Thdchecksec" value="">
              </div> <!-- /controls -->
            </div> <!-- /control-group -->

            <div class="control-group" style="float: left">
              <label class="control-label" for="Thdloss">Loss Percent(%)&nbsp;&nbsp;</label>
              <div class="controls">
                <input type="text"  class="span1" id="Thdloss" value="">
              </div> <!-- /controls -->
            </div> <!-- /control-group -->

            <div class="control-group"  style="float: left">
              <label class="control-label" for="Thdavgdelay">Average Delay(ms)</label>
              <div class="controls">
                <input type="text"  class="span1" id="Thdavgdelay" value="">
              </div> <!-- /controls -->
            </div> <!-- /control-group -->

              <div class="control-group"  style="float: left">
                <label class="control-label" for="Thdoccnum">Occur Times&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <div class="controls">
                  <input type="text"  class="span1" id="Thdoccnum" value="">
                </div> <!-- /controls -->
              </div> <!-- /control-group -->

              <div class="control-group"  style="float: left">
                <label class="control-label" for="Alerthistory">Archive Days&nbsp;&nbsp;</label>
                <div class="controls">
                  <input type="text"  class="span1" id="Alerthistory" value="">
                </div> <!-- /controls -->
              </div> <!-- /control-group -->

            <hr style="clear:both;">
            <h4>Topology</h4><br>

            <div class="control-group">
              <label class="control-label" for="Alertsound">Alert Sound</label>
              <div class="controls">
                <input type="text"  style="width:97%" id="Alertsound" value="">
              </div> <!-- /controls -->
            </div> <!-- /control-group -->

            <div class="control-group"  style="float: left">
              <label class="control-label" for="Tline">Line Thickness&nbsp;&nbsp;&nbsp;&nbsp;</label>
              <div class="controls">
                <input type="text"  class="span1" id="Tline" value="">
              </div> <!-- /controls -->
            </div> <!-- /control-group -->

            <div class="control-group"  style="float: left">
              <label class="control-label" for="Tsymbolsize">Symbol Size&nbsp;&nbsp;&nbsp;&nbsp;</label>
              <div class="controls">
                <input type="text"  class="span1" id="Tsymbolsize" value="">
              </div> <!-- /controls -->
            </div> <!-- /control-group -->

            <div class="control-group"  style="float: left">
                <label class="control-label" for="Alertcycle">Refresh(min)</label>
                <div class="controls">
                  <input type="text"  class="span1" id="Alertcycle" value="">
                </div> <!-- /controls -->
            </div> <!-- /control-group -->

            <br/><br/>

          </div>
          </div>
          <div class="span8">
              <!-- /widget -->
              <div class="widget widget-table action-table">
                <div class="widget-header"> <i class="icon-th-list"></i>
                  <h3>SmartPing NetWork</h3>
                </div>
                <!-- /widget-header -->
                <div class="widget-content">
                  <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                      <th> Name </th>
                      <th> Ip </th>
                      <th> Type </th>
                      <th> <a title="Check Period">Alert CP(s)</a> </th>
                      <th> <a title="Loss Percent">Alert LP(%)</a>  </th>
                      <th> <a title="Average Delay">Alert AD(ms)</a>  </th>
                      <th> <a title="Occur Times">Alert OT(t)</a>  </th>
                      <th>  </th>
                    </tr>
                    </thead>
                    <tbody class="agentlist">
                    <tr>

                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                      <td colspan="8" style="text-align: center"><input style='margin:4px 3px 0 0;' type='button' onclick='addTr();' class='btn btn-small' value='Add Agent'></td>
                    </tr>
                    </tfoot>
                  </table>
                  <input type="hidden" value="0" class="agentnum" />
                </div>
                <!-- /widget-content -->
              </div>
              <!-- /widget -->
            </div>
      </div>
      <hr>
    </div>
    <!-- /container --> 
  </div>
  <!-- /main-inner --> 
</div>
<!-- /main -->

<div class="footer">
  <div class="footer-inner">
    <div class="container">
      <div class="row">
        <div class="span12"> &copy; 2017 <a target="_blank" href="http://smartping.org" >SmartPing.org</a> <span style="float:right" id="verion"></span></div>
        <!-- /span12 --> 
      </div>
      <!-- /row --> 
    </div>
    <!-- /container --> 
  </div>
  <!-- /footer-inner --> 
</div>
<!-- /footer --> 
<!-- Le javascript
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>

    function saveconf(){
        targets = []
        $("input[name^='tsnum']").each(function(i, t) {
            eval($(this).val());
        });
        $("input[name^='targets']").each(function(i, el) {
            if (el.name.indexOf("Thdchecksec")>0 || el.name.indexOf("Thdoccnum")>0 || el.name.indexOf("Thdloss")>0 || el.name.indexOf("Thdavgdelay")>0){
                eval(el.name+"="+$(this).val()+"");
            }else{
                eval(el.name+"=\""+$(this).val()+"\"");
            }
        });
        //$.grep(targets, function(n) {return $.trim(n).length > 0;})
        ntargets  = []
        $.each(targets,function(index,value){
            if (value) {
                ntargets.push(value)
            }
        });
        config = {}
        config["Name"] = $("#Name").val();
        config["Ip"] = $("#Ip").val();
        config["Ping"] = $("#Ping").val();
        config["Thdchecksec"] =  parseInt($("#Thdchecksec").val());
        config["Thdoccnum"] = parseInt($("#Thdoccnum").val());
        config["Thdloss"] = parseInt($("#Thdloss").val());
        config["Thdavgdelay"] = parseInt($("#Thdavgdelay").val());
        config["Alertsound"] = $("#Alertsound").val();
        config["Tline"] = $("#Tline").val();
        config["Tsymbolsize"] = $("#Tsymbolsize").val();
        config["Timeout"] = $("#Timeout").val();
        config["Alertcycle"] = parseInt($("#Alertcycle").val());
        config["Alerthistory"] = parseInt($("#Alerthistory").val());
        config["Targets"] = ntargets;
        data = {}
        data['config'] = JSON.stringify(config)
        data['password'] = $(".password").val()
        $.ajax({
            dataType: "json",
            type: 'POST',
            url: "/api/saveconfig.json",
            data: data,
            success: function( retdata ) {
                //console.log(retdata)
                if (retdata["status"]=="true"){
                    alert("Config saved success!")
                }else{
                    alert("Config saved fail ("+retdata["info"]+")")
                }
            },
            timeout: 10*1000
          }).fail( function( xhr, status ) {
            alert("Config saved fail (api error!)")
          });
    }

    function deleteTr(nowTr){
        i = $(".agentnum").val()
        $(nowTr).parent().parent().remove();
        $(".agentnum").val(i-1);
    }
    function addTr(){
        i = $(".agentnum").val()
        $(".agentlist").append("<tr><td><input name='tsnum["+i+"]' value='targets["+i+"]={}' type='hidden'><input  name='targets["+i+"][\"Name\"]' value='' style='width:90%'></td><td><input  name='targets["+i+"][\"Addr\"]' style='width:90%' value=''></td><td><input  name='targets["+i+"][\"Type\"]'  style='width:90%' value=''></td><td><input  name='targets["+i+"][\"Thdchecksec\"]'  style='width:90%' value='"+$("#Thdchecksec").val()+"'> </td><td><input  name='targets["+i+"][\"Thdloss\"]' style='width:90%' value='"+$("#Thdloss").val()+"'> </td><td><input  name='targets["+i+"][\"Thdavgdelay\"]'  style='width:90%' value='"+$("#Thdavgdelay").val()+"'> </td><td><input  name='targets["+i+"][\"Thdoccnum\"]' style='width:90%' value='"+$("#Thdoccnum").val()+"'> </td><td><input style='margin-top: -10px;' type='button' onclick='deleteTr(this);' class='btn btn-small' value='D'></td></tr>");
        $(".agentnum").val(parseInt(i)+1);
    }
    $(function(){
        $.getJSON("/api/config.json",function(result){
            if(result["Ping"]=="sysping"){
                $("#Ping").find("option[name='sysping']").attr("selected",true);
            }
            if(result["Ping"]=="goping"){
                console.log(result["Ping"])
                $("#Ping option[name='goping']").attr("selected",true);
            }
            //console.log(result["Ping"])
            $("#verion").html("Version: "+result["Ver"])
            $("#Name").val(result["Name"]);
            $("#Ip").val(result["Ip"]);
            $("#Thdchecksec").val(result["Thdchecksec"]);
            $("#Thdoccnum").val(result["Thdoccnum"]);
            $("#Thdloss").val(result["Thdloss"]);
            $("#Thdavgdelay").val(result["Thdavgdelay"]);
            $("#Alertsound").val(result["Alertsound"]);
            $("#Tline").val(result["Tline"]);
            $("#Tsymbolsize").val(result["Tsymbolsize"]);
            $("#Timeout").val(result["Timeout"]);
            $("#Alertcycle").val(result["Alertcycle"]);
            $("#Alerthistory").val(result["Alerthistory"]);
            $.each(result["Targets"], function(i, field){
                $(".agentlist").append("<tr><td><input name='tsnum["+i+"]' value='targets["+i+"]={}' type='hidden'><input name='targets["+i+"][\"Name\"]' value='"+field.Name+"' style='width:90%'></td><td><input  name='targets["+i+"][\"Addr\"]'  style='width:90%' value='"+field.Addr+"'></td><td><input  name='targets["+i+"][\"Type\"]'  style='width:90%' value='"+field.Type+"'></td><td><input   name='targets["+i+"][\"Thdchecksec\"]' style='width:90%' value='"+field.Thdchecksec+"'> </td><td><input  name='targets["+i+"][\"Thdloss\"]' style='width:90%' value='"+field.Thdloss+"'> </td><td><input  name='targets["+i+"][\"Thdavgdelay\"]' style='width:90%' value='"+field.Thdavgdelay+"'> </td><td><input  name='targets["+i+"][\"Thdoccnum\"]' style='width:90%' value='"+field.Thdoccnum+"'> </td><td><input style='margin-top: -10px;' type='button' onclick='deleteTr(this);' class='btn btn-small' value='D'></td></tr>");
                $(".agentnum").val(i+1);
            });
        });
    });
</script>

</body>
</html>
